<!DOCTYPE html>
<html>
<head lang="en">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <meta name = "format-detection" content="telephone = no" />
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <title>Pulu-充值</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <style>
		html,body{
			height:100%;
			max-width:540px;
			min-width:320px;
			margin:0 auto;
		}
        body{
            background:#F6F6F6;
            overflow-y: hidden;
        }
        #body{
            background:#F6F6F6;
            border-top:1px solid transparent;
        }
        .moneylist:after{
            display:inline-block;
            width: 100%;
            position: relative;
            content:"clear";
            height:0;
            clear:both;
            overflow:hidden;
            visibility:hidden;
        }
        .moneylist{
            /*text-align: justify;*/
        }
        .moneylist div{
			position:relative;
            width:30%;
            margin-left:2.5%;
            height:65px;
            line-height: 65px;
            text-align: center;
            border:1px solid #C0C0C0;
            float:left;
            margin-top:15px;
            /*padding-top:10px;*/
            box-sizing: border-box;
            background: #fff;
            cursor: pointer;
        }
        .moneylist div:last-child{
            padding-top:0;
            line-height: 65px;;
        }
        .moneylist div p{
            width:100%;
            text-align: center;
        }
        .moneylist div p:first-child{
            font-size: 18px;
			/*position:absolute;*/
			/*top:50%;*/
			/*transform:translateY(-50%);*/
        }
        .moneylist div p:last-child{
            font-size: 12px;
        }
        .moneylist div.checked{
            border:1px solid #D4555F;
        }
        .paybtn{
            margin-left:2.5%;
            width:95%;
            height:50px;
            line-height: 50px;
            text-align: center;
            color:#fff;
            font-size: 19px;
            background: #CC3642;
            border: 1px solid #C82532;
            box-sizing: border-box;
            border-radius: 2px;
            cursor: pointer;
        }
        .title{
            font-size: 20px;
            margin:0 2.5%;
            margin-top:15px;
        }
        div[id~="m"].checked{
            border-color:#C20C1B;
        }
        /*其他金额*/
        #otherchoiceplace{
            position:fixed;
            top:0;
            left:0;
            bottom:0;
            width:100%;
            overflow: hidden;
            box-sizing: border-box;
			margin:0 auto;
            background: rgba(0,0,0,0.75);
            z-index: 1000;
        }
        #otherchoiceplace>div{position:relative;width:100%;height:100%;}
        .table{
            padding:20px;
            margin:0 auto;
			max-width:520px;
			min-width:300px;
            background: #fff;
            height:225px;
            box-sizing: border-box;
            /*position: absolute;*/
            /*left: 50%;*/
            /*transform: translateX(-50%);*/
        }
        .table .tr .td{
            overflow: hidden;
            padding:0;
            text-align: center;
        }
        .table .tr:first-child .td:first-child{
            height:26px;
            margin-bottom:15px;
        }
        .table .tr:first-child .td span:first-child{
            font-size: 18px;
            font-weight: bold;
        }
        .table .tr:first-child .td span:nth-child(2){
            width:20px;
            height:20px;
            display: inline-block;
            position: absolute;
            top:18px;
            right:40px;
        }
        .table .tr .td span:nth-child(2) img{
            width:20px;
            height:20px;
            transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
        }
        .inputplace{
            border:1px solid #C20D1C;
            height:44px;
            box-sizing: border-box;
            padding:10px 0;
            overflow: hidden;
            position: relative;
        }
        .inputplace span{
            display: inline-block;
            width:44px;
            height:24px;
            border-left: 1px solid #A39B9B;
            z-index: 10;
            position: absolute;
            right: 0;
        }
        .inputplace input{
            width:100%;
            padding-right:50px;
            box-sizing: border-box;
            text-align: right;
        }
        .tr:last-child{
            margin-top:39px;
        }
        .tr:last-child>.td{
            height:50px;
            line-height: 50px;
            box-sizing: border-box;
            text-align: center;
            font-size: 18px;
            color:#fff;
            background: #cdcdcd;
            border:1px solid #D3D3D3;
            border-radius: 2px;
        }
        #paybtn2.checked{
            background:#CC3642 ;
            border:1px solid #CD3945;
            cursor: pointer;
        }
		/*二维码*/
		#QRcode{
			display:none;
			position:relative;
			top:0;
			bottom:0;
			z-index:1000;
			width:100%;
            max-width: 1000px;
			height:100%;
			background:#fff;
		}
		#outputbox,#payokinfo,#payfail{
			/*position:absolute;*/
			/*top:50%;*/
			/*left:50%;*/
			/*transform:translate(-50%,-50%);*/
            position:relative;
            top:20%;
			margin:0 auto;
			height:361px;
			width:250px;
		}
		#closebtn{
			position:absolute;
			top:30px;
			right:30px;
			width:30px;
			height:30px;
			background:url("img/delete02.png") no-repeat;
			background-size:30px;
		}
		#wxpayimg,#payok{
			position:absolute;
			top:30px;
			left:30px;
			width:118PX;
			height:30px;
			margin-bottom:20px;
			background:url("img/WePayLogo.png") no-repeat;
			background-size:auto 30px;
		}
		#payok{
			width:90px;
			padding-left:36px;
			line-height:30px;
			font-size:18px;
			background:url("img/ajr.png") no-repeat;
			background-size:30px 30px;
			color:#21B100;
		}
		#wxexplain{
			height:65px;
			margin-top:15px;
			background:url("img/explain.png") no-repeat 100%;
		}
		#payokinfo{
			display:none;
			width:80%;
		}
		#payinfo div{
			overflow:hidden;
		}
		#payokinfo div:nth-child(3),#payokinfo div:nth-child(4){
			height:40px;
			line-height:40px;
			color:#959595;
			font-size:20px;
		}
		#payokinfo div:first-child{
			margin:0 auto;
			text-align:center;
			font-size:24px;
			color:#363636;
		}
		#showpaynum{
			margin:10px 0;
			font-size:40px;
			font-weight:bold;
			color:#333;
			text-align:center;
			border-bottom:1px solid #ececec;
		}
		#payfail{
			display:none;
		}
		#noteword{
			margin-top:5px;
			color:#9B9B9B;
			font-size:13px;
		}
        input{
            padding-right: 5px;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button{
            -webkit-appearance: none !important;
        }
        input[type="number"]{-moz-appearance:textfield;}
        body.gating-feed_switcher_bar-on{background: #f6f6f6;}
        canvas{display:none;}
    </style>
</head>
<body class=" experiment-lookup_bar-on gating-feed_switcher_bar-on mweb  gating-new_mweb_header_logged_out-off" id="scoredetialpage">
<div class="PageWrapper mweb" id="page_wrapper" style="margin-top:0;">
    <header class="Header">
        <!-- 头部导航条-->
        <div class="fixed_header" style="position:relative">
            <div class="header_main">
                <button class="mweb_modal_back_button"></button>
                <div class="header_action_buttons" style="left:30px;">
                    <div class="page_title" style="padding-left:5px;">充值</div>
                </div>
            </div>
        </div>
    </header>
    <!-- 主体-->
    <div id="body">
        <div class="title">充值金额:</div>
        <div class="moneylist">
            <div id="m5" class="checked">
                <p>5元</p>
                <p></p>
            </div>
            <div id="m10">
                <p>10元</p>
                <p></p>
            </div>
            <div id="m30">
                <p>30元</p>
                <p></p>
            </div>
            <div id="m50">
                <p>50元</p>
                <p></p>
            </div>
            <div id="m100">
                <p>100元</p>
                <p></p>
            </div>
            <div id="m200">
                <p>200元</p>
                <p></p>
            </div>
            <div id="m500">
                <p>500元</p>
                <p></p>
            </div>
            <div id="otherchoice">
                其他金额
            </div>
        </div>
        <div class="paybtn" id="paybtn">
            立即支付<span>5</span>元
        </div>
    </div>
    <!-- 其他金额-->
    <div id="otherchoiceplace" style="display:none;position:absolute;">
        <div>
            <div class="table">
                <div class="tr">
                    <div class="td">
                        <span>请填写金额</span>
                    <span class="rt" id="closeotherchoice">
                        <img src="img/addbtnimg2.png"/>
                    </span>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">
                        <div class="inputplace">
                            <span class="rt">元</span>
                            <input type="number" id="othermoney"/>
                        </div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">
                        <div id="paybtn2">立即支付<span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("otherchoiceplace").style.height=parseFloat(window.screen.availHeight)+"px";
    </script>
</div>
<!--二维码-->
	<div id="QRcode">
		<div id="closebtn"></div>
		<div id="wxpayimg" style="display:block"></div>
		<!--支付成功-->
		<div id="payok" style="display:none">支付成功</div>
		<div id="outputbox">
			<div id="output"></div>
			<div id="wxexplain"></div>
			<div id="noteword">您也可以保存二维码图片，在微信中识别二维码完成支付操作</div>
		</div>
		<!--支付成功-->
		<div id="payokinfo">
			<div>铺路付费问答</div>
			<div id="showpaynum"></div>
			<div>
				<span class="lf">商品</span>
				<span class="rt">铺路充值</span>
			</div>
			<div>
				<span class="lf">商品单号</span>
				<span class="rt" id="orderid"></span>
			</div>
		</div>
	</div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="ftnjs/jquery.qrcode.min.js"></script>
<script src="js/md5.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="ftnjs/urlnote.js"></script>
<script src="js/rechargepc.js"></script>
</body>
</html>